<template>
    <div>
        <h3 style="text-align: center;">商品信息列表
            <el-button style="float:right;" @click="add()">添加商品</el-button>
        </h3>
        <div style="height: 800px;">
            <el-table
                    :data="list"
                    stripe
                    style="width: 100%"
            >
                <el-table-column
                        prop="title"
                        label="商品标题"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="desc"
                        label="商品描述"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="商品种类"
                        align="center">
                    <template slot-scope="scope">
                        {{scope.row.type==1?"猫咪":"小狗"}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="imgUrl"
                        label="商品图片"
                        align="center">
                    <template scope="scope">
                        <el-image
                                style="width: 100px; height: 100px"
                                :src="scope.row.imgUrl"
                                :fit="fit"></el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="商品价格"
                        align="center"
                >
                    <template scope="scope"><span style="color:red;font-weight: bold;">{{scope.row.price}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="200">
                    <template scope="scope" style="display: flex;justify-content: left">
                        <el-button type="primary" @click="update(scope)">编辑</el-button>
                        <el-button type="danger" @click="del(scope)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div style="text-align: center;margin-top: 20px;">
            <el-pagination
                    layout="prev, pager, next"
                    :total="total"
                    :page-size=10
                    @current-change="currentChange"
                    :current-page="currentPage"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "goodsList",
        data() {
            return {
                list: [],
                total: 100,
                limit: 20,
                currentPage: 1
            }
        },
        methods: {
            initData() {
                this.$http.get('goods/list', {
                    params: {
                        limit: this.limit,
                        page: this.currentPage
                    }
                }).then(data => {
                    if (data.data.code === 100000) {
                        this.list = data.data.data.list
                        this.total = data.data.data.total
                    }
                })
            },
            currentChange(val) {
                this.currentPage = val
                this.initData();
            },
            del(scope) {
                this.$http.get("user/del", {
                    params: {
                        id: scope.row.id
                    }
                }).then(data => {
                    if (data.data.code === 100000) {
                        this.$message.success("删除成功");
                        this.list.splice(scope.$index, 1)
                    } else {
                        this.$message.error(data.data.msg)
                    }
                })
            },
            update(scope) {
                this.$router.push({path:"goodUpdate" ,query: {id: scope.row.id}})
            },
            add() {
                this.$router.push({path:"goodUpdate", query: {id: 0}})
            }
        },
        created() {
            this.initData()
        }
    }
</script>

<style scoped>

</style>